<template>

  <div class="h-12  border-b-2 flex-none flex backdrop-opacity-0 hover:bg-slate-300/25  active:bg-slate-500/40 "
    @dblclick.stop="chooseAndPlayMusic">
    <!--一首歌-->
    <div class=" w-1/6 flex"><img :src="songData.songCoverSrc" alt=""></div>
    <div class=" flex-1">{{ songData.songTitle}}
    <slot></slot>
    </div>
    <div class=" w-1/6 flex items-center">
      <svg @click.stop="chooseAndPlayMusic" t="1732964706581" class="icon ml-10 hover:cursor-pointer hover:fill-slate-200 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 hover:duration-150 duration-300"
        style="stroke-width:2;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="5095" width="32" height="32">
        <path
          d="M512 64C264.576 64 64 264.576 64 512s200.576 448 448 448 448-200.576 448-448S759.424 64 512 64zM414.656 726.272 414.656 297.728l311.616 190.464L414.656 726.272z"
          p-id="5096"></path>
      </svg>
      
    </div>
    
    <div @click.stop="saveSong" class="w-12 h-12"><img :src="imgSrc02" v-show="IsList"></div>
  </div>
</template>
<script>
  import store from '@/store';
import axios from 'axios';

  export default {
    name: 'Song',
    props: ['songData','IsList'],
    data() {
      return {
        once:true

      }
    },
    methods: {
      chooseAndPlayMusic() {
        store.dispatch('choose', this.songData.songCoverSrc)
        store.dispatch('play', this.songData.songAudioSrc)
      },
      saveSong() {
        let username=localStorage.getItem("username")
        console.log(username);
        const saveSongData=new FormData();
        saveSongData.append("username",username);
        saveSongData.append("musicName",this.songData.songTitle);
        if(!this.songData.IsSave){
        this.songData.IsSave=!this.songData.IsSave
        axios.post("http://127.0.0.1:8080/saveSong",saveSongData).then(response=>{
               console.log(response.data);
        });
        console.log(this.songData.IsSave);
        event.stopPropagation();
      } else{
        this.songData.IsSave=!this.songData.IsSave
        axios.post("http://127.0.0.1:8080/delete",saveSongData).then(response=>{
          console.log("这个歌被删了");
        })

      }
      },

    },
    computed: {
      imgSrc02() {
        return this.songData.IsSave ? "https://dmsgame.obs.cn-south-1.myhuaweicloud.com/vue%E6%9C%9F%E6%9C%AB/%E5%B7%B2%E6%94%B6%E8%97%8F%E5%9B%BE%E6%A0%87.svg" : "https://dmsgame.obs.cn-south-1.myhuaweicloud.com/vue%E6%9C%9F%E6%9C%AB/%E6%9C%AA%E6%94%B6%E8%97%8F%E5%9B%BE%E6%A0%87.svg"
      }
    },
    mounted(){
      const saveSongData=new FormData();
      let username=localStorage.getItem("username")
        saveSongData.append("username",username);
        saveSongData.append("musicName",this.songData.songTitle);
      axios.post("http://127.0.0.1:8080/record",saveSongData).then(response=>{
        this.songData.IsSave = response.data
      }).catch((err)=>{
      }) 
      console.log("执行一次")
      
    }
  }
</script>
<style>

</style>